<template>
	<div>
		<div class="bank_card">
			<div class="bank_card_list">
				<div class="bank_card_list_item" v-for="item in bank" :key="item.id">
					<img src="../../../static/images/yinhangka.png" alt="">
					<div class="b_c_l">
						<span>{{item.name}}</span>
						<div class="chuxuka">储蓄卡</div>
						<div class="card-number">**** **** **** **** {{item.num}}</div>
					</div>
				</div>
			</div>

		</div>
		<div class="btn_sure">
			<div class="addcard" @click="addcard()">
				<div> <img src="../../../static/images/add.png" alt="">
					<span>添加银行卡</span>
				</div>
				<img src="../../../static/images/right.png" alt="" style="width:16rpx;height:16rpx;">
			</div>
		</div>

	</div>

</template>

<script>
    import {request} from '@/wxRequest/requestApi'

    export default {
        data() {
            return {
                addcard() {
                    wx.navigateTo({url: '/pages/add_Bank/main'})
                },
                bank: []
            }
        },
        onShow() {
            this._getBank()
        },
        methods: {
            _getBank() {
                let params = {
                    url: '/BankList',
                    method: 'POST',
                    data: {
                        userId: wx.getStorageSync('userId'),
                    },
                }

                request(params).then(re => {
                    if (re.status === 0) {
                        re.data.forEach(item => {
                            item['num'] = item.bankNumber.substring(item.bankNumber.length-4)
                        })
                        this.bank = re.data
                    }
                })
            },
        },
    }
</script>

<style lang="scss" scoped>
.bank_card {
	width: 100%;
	background: #fff;
	.bank_card_list {
		width: 100%;
		&:last-child {
			margin-bottom: 20rpx;
		}
		.bank_card_list_item {
			height: 111px;
			width: 90%;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			margin: auto;
			margin-top: 20rpx;
			border-radius: 20rpx;
			background: linear-gradient(#030000, #191919);
			img {
				width: 30rpx;
				height: 30rpx;
				padding: 20px;
				vertical-align: top;
			}
			.b_c_l {
				margin-top: 30rpx;
				span {
					color: #ddcfa8;
					font-size: 15px;
					margin-top: 20rpx;
				}
				.chuxuka {
					color: #ddcfa8;
					font-size: 13px;
				}
				.card-number {
					color: #ddcfa8;
					font-size: 22px;
					margin-top: 10rpx;
				}
			}
		}
	}
}
.btn_sure {
	width: 100%;
	padding: 8rpx;
	background: #fff;
	.addcard {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		width: 92%;
		margin: auto;
	}
	span {
		font-size: 13px;
		color: #323232;
		padding: 15rpx;
	}
	img {
		width: 32rpx;
		height: 32rpx;
		vertical-align: middle;
	}
}
</style>

